<template>
  <Header></Header>
  <NavSwiper></NavSwiper>

  <div ref="target">
    <!-- 异步加载，滑动到再加载 -->
    <NewGoodCourse v-if="targetIsVisible"></NewGoodCourse>
  </div>

  <Foot></Foot>
</template>

<script setup>
import Header from "../components/common/Header.vue"
import NavSwiper from "../components/Home/NavSwiper.vue"
import Foot from '../components/common/Foot.vue'

import { useIntersectionObserver } from '@vueuse/core'

// 异步引入
const NewGoodCourse = defineAsyncComponent(() =>
  import('../components/Home/NewGoodCourse.vue')
)
const target = ref(null);
const targetIsVisible = ref(false);
// 参数1：ref引用，获取DOM
// 参数2：isIntersecting 会在参数1获取的DOM进入可视区域时监听并为 true
const { stop } = useIntersectionObserver(
  target,
  ([{ isIntersecting }]) => {
    if (isIntersecting) {
      targetIsVisible.value = isIntersecting
      console.log('进入新上好课部分');
    }
  },
)
</script>